<template>
    <div>
        <div class="step-block">
            <zw-steps :active="active" :steps="steps" />
        </div>
        <Apply @submit="applySubmitHandler" v-if="active === 0" />
        <Updoc @submit="updocSubmitHandler" :proposer="proposer" v-if="active === 1" />
        <Valid @submit="validSubmitHandler" :status="validStatus" v-if="active === 2" />
        <Accopen @submit="accopenSubmitHandler" v-if="active === 3" />
        <Reported @submit="reportSubmitHandler" v-if="active === 4" />
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ZwSteps from '@/components/Steps.vue';
import Apply from './apply.vue';
import Updoc from './updoc.vue';
import Valid from './valid.vue';
import Accopen from './accopen.vue';
import Reported from './reported.vue';
const router = useRouter();
const active = ref(0);
const proposer = ref('2');
const validStatus = ref('0');
const steps = reactive([
    {
        title: '申请开户'
    },
    {
        title: '上传资料'
    },
    {
        title: '小额打款验证'
    },
    {
        title: '账户开通'
    },
    {
        title: '报备开通'
    }
]);
const accountStatus = useRoute().query.status;
if (accountStatus === '0') {
    active.value = 0;
} else if (accountStatus === '2') {
    const res = useRoute().query.proposer;
    proposer.value = res === '1' ? '1' : '2';
    active.value = 1;
} else if (accountStatus === '3' || accountStatus === '4' || accountStatus === '5' || accountStatus === '6') {
    accountStatus === '3' && (validStatus.value = '1');
    accountStatus === '4' && (validStatus.value = '0');
    ['5', '6'].includes(accountStatus) && (validStatus.value = '2');
    active.value = 2;
} else if (accountStatus === '7') {
    active.value = 3;
} else {
    active.value = 4;
}
const applySubmitHandler = obj => {
    proposer.value = obj.proposer;
    active.value = 1;
};
const updocSubmitHandler = () => {
    validStatus.value = '1';
    active.value = 2;
};
const validSubmitHandler = () => {
    validStatus.value = '1';
    active.value = 2;
};

const accopenSubmitHandler = () => {
    active.value = 4;
};

const reportSubmitHandler = () => {
    router.back();
};
</script>
<style lang="scss" scoped>
.step-block {
    text-align: center;
    background-color: #f9f9f9;
    padding: 20px 30px;
    border: 1px solid #eaeaea;
}
</style>
